<template>
  <div class="app">
    <!-- 顶部导航 -->
    <el-row style="margin-bottom: 20px; align-items: center;">
      <el-button type="success" style="margin: 0 20px;" @click="drawer = true;">
        设置表单sql
      </el-button>
      <el-button type="success" style="margin: 0 20px;" @click="dialogVisible = true;">
        添加查询类型
      </el-button>
      <el-button type="success" style="margin: 0 20px;" @click="dialogList = true;">
        查询类型列表
      </el-button>
      <el-select style="width: 275px" v-model="menuType" placeholder="请选择关联类型">
        <el-option v-for="item in typeList" :key="item.menuTypeCode" :label="item.menuTypeName"
                   :value="item.menuTypeCode"></el-option>
      </el-select>
      <el-button style="margin: 0 20px;" type="primary" @click="searchSqlSettings">查询</el-button>
    </el-row>

    <el-card>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="name" label="名称" width="265px"></el-table-column>
        <el-table-column prop="menuType" label="关联数据类型" width="215px">
          <template slot-scope="scope">
            {{ getMenuTypeName(scope.row.menuType) }}
          </template>
        </el-table-column>
        <el-table-column prop="sqlType" label="sql类型" width="70px">
          <template slot-scope="scope">
            {{ scope.row.sqlType === 0 ? "折线图" : scope.row.sqlType === 1 ? "饼图" : "明细信息" }}
          </template>
        </el-table-column>
        <el-table-column prop="sqlString" label="sql"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteSqlSetting(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer title="设置表单sql"
               :visible.sync="drawer"
               :with-header="true"
               :before-close="handleClose"
               size="50%">
      <el-form>
        <div class="drawer_content">
          <div class="drawer_form">
            <el-form :model="sqlForm" :rules="sqlRules" label-width="100px" ref="ruleFormRef">
              <el-form-item label="名称" prop="name">
                <el-input type="text" placeholder="请输入设置名称" v-model="sqlForm.name"></el-input>
              </el-form-item>
              <el-form-item label="sql类型" prop="sqlType">
                <el-select v-model="sqlForm.sqlType" placeholder="请选择关联类型">
                  <el-option v-for="item in sqlTypeList" :key="item.code" :label="item.name"
                             :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联数据类型" prop="mold">
                <el-select v-model="sqlForm.menuType" placeholder="请选择关联类型">
                  <el-option v-for="item in typeList" :key="item.menuTypeCode" :label="item.menuTypeName"
                             :value="item.menuTypeCode"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="sql" prop="sqlString">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入sql"
                  :autosize="{ minRows: 1, maxRows: 25}"
                  v-model="sqlForm.sqlString">
                </el-input>
              </el-form-item>
              <el-form-item :style="{
                  position: 'absolute',
                  right: 0,
                  bottom: 0,
                  width: '100%',
                  borderTop: '1px solid #e9e9e9',
                  padding: '10px 16px',
                  background: '#fff',
                  textAlign: 'right',
                  zIndex: 1,
                }">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit('ruleFormRef')">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-form>
    </el-drawer>

    <el-dialog title="添加查询类型" :visible.sync="dialogVisible" width="30%">
      <el-form :model="sqlTypeform" ref="sqlTypeform" :rules="rules">
        <el-form-item label="类型名称" label-width="90px" prop="name">
          <el-input v-model="sqlTypeform.menuTypeName" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item label="类型code" label-width="90px" prop="code">
          <el-input v-model="sqlTypeform.menuTypeCode" placeholder="请输入类型code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false; resetSqlTypeform()">取 消</el-button>
        <el-button type="primary" @click="addType">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查询类型列表" :visible.sync="dialogList" width="30%">
      <el-table :data="typeList" border stripe style="width: 100%">
        <el-table-column prop="menuTypeName" label="类型名称"></el-table-column>
        <el-table-column prop="menuTypeCode" label="类型code"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editType(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  addSqlSetting,
  addSqlType,
  deleteSqlSetting, deleteSqlType,
  getSqlSettingList,
  getSqlTypeList,
  updateSqlSetting, updateSqlType
} from "@/api/ZSqlSettings";

export default {
  data() {
    return {
      menuType: "",
      dialogList: false,
      tableData: [],
      sqlTypeList: [
        {
          name: "折线图",
          code: 0,
        },
        {
          name: "饼图",
          code: 1,
        },
        {
          name: "明细信息",
          code: 2,
        },
      ],
      start: 1,
      pageSize: 10,
      totalCount: 0,
      drawer: false,
      typeList: [],
      rules: {
        menuTypeName: [
          {required: true, message: '请输入类型名称', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ],
        menuTypeCode: [
          {required: true, message: '请输入类型code', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ]
      },
      sqlRules: {
        name: [
          {required: true, message: '请输入设置名称', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ],
        menuType: [
          {required: true, message: '请选择关联类型', trigger: 'change'}
        ],
        sqlType: [
          {required: true, message: '请选择sql类型', trigger: 'blur'}
        ],
        sqlString: [
          {required: true, message: '请输入sql', trigger: 'blur'}
        ]
      },
      dialogVisible: false,
      sqlTypeform: {
        id: "",
        menuTypeName: "",
        menuTypeCode: ""
      },
      sqlForm: {
        id: "",
        name: "",
        sqlString: "",
        sqlType: "",
        menuType: ""
      },
    };
  },
  mounted() {
    this.searchMenuType();
    this.searchSqlSettings()
  },
  methods: {
    addType() {
      if (this.sqlTypeform.id) {
        updateSqlType(this.sqlTypeform).then(response => {
          this.searchMenuType()
        })
      } else {
        addSqlType(this.sqlTypeform).then(response => {
          this.searchMenuType()
        })
      }
      this.resetSqlTypeform()
      this.dialogVisible = false;
    },
    handleClose() {
      this.resetSqlForm()
      this.drawer = false;
    },
    resetSqlForm() {
      this.sqlForm = Object.assign({}, this.$options.data().sqlForm);
      console.log(this.sqlForm);
    },
    resetSqlTypeform() {
      this.sqlTypeform = Object.assign({}, this.$options.data().sqlTypeform);
      console.log(this.sqlTypeform)
    },
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.sqlForm.id) {
            console.log("修改", this.sqlForm)
            updateSqlSetting({
              id: this.sqlForm.id,
              name: this.sqlForm.name,
              sqlString: this.sqlForm.sqlString,
              menuType: this.sqlForm.menuType,
              sqlType: this.sqlForm.sqlType
            }).then(response => {
              this.searchSqlSettings()
            })
            this.drawer = false;
          } else {
            console.log("添加")
            addSqlSetting({
              id: this.sqlForm.id,
              name: this.sqlForm.name,
              sqlString: this.sqlForm.sqlString,
              menuType: this.sqlForm.menuType,
              sqlType: this.sqlForm.sqlType
            }).then(response => {
              this.searchSqlSettings()
            })
            this.drawer = false;
          }
          this.resetSqlForm();
          this.drawer = false;
        } else {
          console.log('error submit!!');
          this.searchSqlSettings()
          return false;
        }
      });
    },
    searchMenuType() {
      getSqlTypeList().then(response => {
        this.typeList = response.data;
      })
    },
    searchSqlSettings() {
      getSqlSettingList({
        pageSize: this.pageSize,
        start: this.start,
        menuType: this.menuType,
      }).then(response => {
        this.tableData = response.data;
        this.totalCount = response.data.totalCount;
      })
    },
    getMenuTypeName(menuId) {
      console.log(this.typeList)
      const menu = this.typeList.find(item => {
        console.log(item)
        console.log(item.menuTypeCode)
        console.log(menuId)
        if (item.menuTypeCode === menuId) {
          return item;
        }
      });
      console.log(menu)
      return menu ? menu.menuTypeName : '未知类型';
    },
    edit(row) {
      this.sqlForm = {...row};
      this.drawer = true;
    },
    deleteSqlSetting(row) {
      this.$confirm('此操作将删除该条sql设置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          deleteSqlSetting(row.id).then(response => {
            this.searchSqlSettings()
            if (response.code !== 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }

          }).catch((err) => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          });
        }).catch(() => {
        this.searchSqlSettings()
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteType(row) {
      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          deleteSqlType(row.id).then(response => {
            this.searchMenuType()
            if (response.code !== 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })
        }
      )
    },
    editType(row) {
      this.sqlTypeform = row;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
.app {
  padding: 20px;
}

.row-selected {
  background-color: #e6f7ff !important;
}

.row-even {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

.row-odd {
  background-color: #ffffff; /* 奇数行背景色 */
}

.paging {
  display: flex;
  justify-content: flex-end;
}
</style>
